<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            border: 1px solid #eee;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <section>
            <p>message: {{ message }}</p>
            <input type="text" v-model="message">
        </section>

        <section>
            <p>checked: {{ checked }}</p>

            <input type="checkbox" id="jack" value="Jack" v-model="checked">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checked">
            <label for="john">john</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checked">
            <label for="mike">mike</label>
        </section>

        <section>
            <p>checked radio: {{ picked }}</p>

            <input type="radio" id="one" value="One" v-model="picked" />
            <label for="one">One</label>

            <input type="radio" id="two" value="Two" v-model="picked" />
            <label for="two">Two</label>
        </section>

        <section>
            <p>selected: {{ selected }}</p>

            <select name="select" v-model="selected">
                <option disabled value="">Please select one</option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
        </section>

        <section>
            <div>multiple Selected: {{ mSelected }}</div>

            <select v-model="mSelected" multiple>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </section>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'
        createApp({
            setup() {
                const message = ref('')
                const checked = ref([])
                const picked = ref('')
                const selected = ref('')
                const mSelected = ref([])
                return {
                    message,
                    checked,
                    picked,
                    selected,
                    mSelected
                }
            }
        }).mount('#app')
    </script>
</body>
</html>